<template>
  <div class="videodetail">
      <div class="video_container" :style="{width:videowidth}">
          <div class="video_banner">
              <img src="../../assets/img/video_title.png" alt="">
          </div>
          <div class="video_content">
              <div class="video_title">
                  <div class="title_left">
                      <span>视频课程</span>
                  </div>
                  <div class="tilte_right">
                      <a-icon type="home" />
                      <span>您当前位置</span>
                      <span>></span>
                      <span>课程详情</span>
                  </div>
              </div>
              <div class="kkk">
                <div class="videoo">
                    <Vvvideo :videou="videou" :videooid="videooid" :doesplay="doesplay" :playTime="playTime"></Vvvideo>
                </div>
                <div class="video_name">
                    <h2>{{lessonintro.name}}</h2>
                    <p>课时：共{{lessonintro.lesson_count}}课时</p>
                    <p>时间：{{lessonintro.add_time}}</p>
                    <p>授课讲师：{{lessonintro.teacher_name}}</p>
                    <p>课程简介：{{lessonintro.desc}}</p>
                    <span>课程评分：</span>
                    <a-rate v-model="is_course_grade" allow-half @change="classrate"/>
                    <a-icon type="like"  :class="[dolike?'doeslike':'']"  style="font-size:32px;padding-top:20px;cursor: pointer;" @click="likee"/>
                    <div class="join_class">
                        <a-icon type="plus" />
                        <span @click="classCollection">{{this.texttt}}</span>
                    </div>
                </div>
              </div>
          </div>
          <div class="class_detail">
              <div class="class_left">
                <a-tabs default-active-key="1" @change="callback">
                    <a-tab-pane key="1" tab="课程章节">
                        <div class="lessononeee" style="padding:10px" v-for="(item,index1) in lesson" :key="item.id">
                            <h3>{{item.name}}</h3>
                            <a-steps direction="vertical" size="small" :current="1">
                                <a-step :description="item1.name" v-for="(item1,index) in item.video" :status="item1.is_over==true?'finish':'wait'" :key="item1.id" @click.stop="playvideo(index1,index)"/>
                            </a-steps>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="课程介绍" force-render>
                        <p style="font-size:16px;text-indent:2em;margin:0 10px 0 10px" v-html="detail"></p>
                    </a-tab-pane>
                    <a-tab-pane key="3" tab="学员评论">
                        <div class="commentlist">
                            <div class="listone" v-for="item in comment" :key="item.id">
                                <a-avatar size="large" :src="item.image_url"/>
                                <div class="listone_right">
                                    <p>{{item.username}}</p>
                                    <p>{{item.add_time}}</p>
                                    <p style="color:grey">{{item.comments}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="kaka">
                            <a-pagination v-model="current" @change="currentpage" showQuickJumper :pageSize="pageSize" size="small" :total="total" show-less-items />
                        </div>
                        <div class="addcomment">
                            <h3>我的评论</h3>
                            <div class="kal" style="display:flex;">
                                <a-avatar size="large" :src="myimg"/>
                                <a-textarea :rows="4"  style="width:80%;margin-left:20px" v-model="mmmq" @change="zcxa"/>
                            </div>
                            <div class="qweq" style="margin:10px 0 10px 0;text-align:center">
                                <a-button type="primary" @click="submitcomment">
                                    提交评论
                                </a-button>
                            </div>
                        </div>
                    </a-tab-pane>
                </a-tabs>
              </div>
              <div class="rrrright">
                <div class="class_right" @click="goteach(teacher_info.id)">
                    <h3>讲师介绍</h3>
                    <div class="touxiang">
                        <a-avatar :size="64" :src="teacher_info.image_url" />
                        <div class="tou">
                            <h3 style="line-height: 64px;font-size: 21px;">{{teacher_info.name}}</h3>
                        </div>
                    </div>
                    <i>{{teacher_info.desc}}</i>
                    <div class="have_video">
                        <b>已发布{{teacher_info.teacher_courses_count}}个视频</b>
                        <span>他的视频</span>
                    </div>
                </div>
                <div class="study">
                    <h3>共有{{course_students_count}}人在学</h3>
                    <div class="study_detail">
                        <div class="study_one" v-for="item in course_students" :key="item.id">
                            <div class="headddd">
                                <a-avatar size="large" :src="item.image_url" />
                            </div>
                            <p>{{item.nickname}}</p>
                        </div>
                    </div>
                    <div class="dada">
                        <a-pagination v-model="current1" @change="currentpage1" showQuickJumper  :pageSize="pageSizee"   size="small" :total="total1" show-less-items />
                    </div>
                </div>
              </div>
          </div>
          <div class="interest">
              <div class="inter_title">
                  <h2>WHAT INTERESTS YOU</h2>
                  <div class="in_innn">
                      <div class="mmm"></div>
                      <h2>你感兴趣的</h2>
                      <div class="nnn"></div>
                  </div>
                  <p>热门课程帮助你更好的学习</p>
                  <p>专业，可靠，高效，课程种类多，名师辅导</p>
              </div>
              <div class="inter_content">
                  <div class="ine_one" v-for="item in hot_courses" :key="item.id" @click="godetail(item.id)">
                      <img :src="item.image_url" alt="">
                      <p>{{item.name}}</p>
                      <div class="adsad">
                          <p>讲师：{{item.teacher_name}}</p>
                          <span>{{item.department_name}}</span>
                      </div>
                  </div>
              </div>
              <div class="more_video">
                  <span>查看更多视频</span>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import Vvvideo from './vvvideo'
import axios from '../../utils/axios'
import {getcommentsData,subcomment,studentsclass} from '../../api'
export default {
    components:{
        Vvvideo
    },
    data() {
        return {
            value: 2,
            mmmq:'',
            comment: [
                {
                    id:'',
                    username:'',
                    image_url:'',
                    comments:'',
                    add_time:'',
                    course:'',
                }
            ],
            submitting: false,
            current: 1,
            pageSize:5,
            total:0,
            current1: 1,
            pageSizee:12,
            total1:0,
            dolike:false,
            joinnn:false,
            texttt:'加入学习',
            is_course_grade:0,
            course_students:[
                {
                    id:'',
                    nickname:'',
                    image_url:'',
                }
            ],
            hot_courses:[
                {
                    id:'',
                    teacher_name:'',
                    department_name:'',
                    name:'',
                    image_url:'',
                }
            ],
            teacher_info:{
                id:'',
                image_url:'',
                name:'',
                desc:'',
                teacher_courses_count:'',
            },
            lesson:[
                {
                    id:'',
                    name:'',
                    video:[
                        {
                            id:'',
                            name:'',
                            learn_times:'',
                            video_url:'',
                            is_over:false
                        }
                    ]
                }
            ],
            course_students_count:0,
            lessonintro:{
                name:'',
                add_time:'',
                teacher_name:'',
                lesson_count:'',
                desc:''
            },
            detail:'',
            videou:'',
            videooid:0,
            doesplay:true,
            myimg:'',
            playTime:0
        };
    },
    mounted(){
        this.gggggetdata()
        this.getcommentData()
        this.getstudentsclassData()
        axios.get('/trains/user_info/').then(res=>{
            this.myimg = res.image_url
        })
    },
    methods: {
        likee(){
            this.doespraise()
        },
        godetail(id){
            this.$router.push({path:'/videodetail',query:{id:id}})
            location.reload()
        },
        goteach(id){
            this.$router.push({path:'/teacherclass',query:{id:id}})
        },
        jooo(){
            if(this.joinnn==true){
                this.texttt = '已加入'
            }else{
                this.texttt = '加入学习'
            }
        },
        playvideo(i,j){
            if(this.videou==''){
                this.videou = this.lesson[0].video[0].video_url
                this.videooid = this.lesson[0].video[0].id
                this.doesplay = this.lesson[0].video[0].is_over
                this.playTime = this.lesson[0].video[0].time
            }else{
                this.videou = this.lesson[i].video[j].video_url
                this.videooid = this.lesson[i].video[j].id
                this.doesplay = this.lesson[i].video[j].is_over
                this.playTime = this.lesson[i].video[j].time
            }
        },
        gggggetdata(){
            let id = this.$route.query.id
            let url = `/trains/detail_courses/${id}/`
            axios.get(url).then(res=>{
                this.is_course_grade = res.is_course_grade
                this.joinnn = res.is_collection_course
                this.dolike = res.is_course_click
                this.hot_courses = res.hot_courses
                this.teacher_info = res.teacher_info
                this.course_students_count = res.course_students_count
                this.lesson = res.lesson
                this.lessonintro.name = res.name
                this.lessonintro.add_time = res.add_time
                this.lessonintro.teacher_name = res.teacher_name
                this.lessonintro.lesson_count = res.lesson_count
                this.lessonintro.desc = res.desc
                this.detail = res.detail
                this.jooo()
                this.playvideo()
            })
        },
        getcommentData(){
            let id = this.$route.query.id
            let page = this.current
            let page_size = this.pageSize
            getcommentsData(id,page,page_size).then(res=>{
                this.comment = res.results
                this.total = res.count
            })
        },
        currentpage(val){
            this.current = val
            this.getcommentData()
        },
        zcxa(val){
            this.mmmq = val.target.value
        },
        submitcomment(){
            let course = this.$route.query.id
            let comments = this.mmmq
            subcomment(course,comments).then(res=>{
                this.mmmq = ''
                this.getcommentData()
                this.$message.success('提交成功');
            })
        },
        currentpage1(val){
            this.current1 = val
            this.getstudentsclassData()
        },
        getstudentsclassData(){
            let course_id = this.$route.query.id
            let page = this.current1
            let page_size = this.pageSizee
            studentsclass(course_id,page,page_size).then(res=>{
                this.course_students = res.results
                this.total1 = res.count
            })
        },
        doespraise(){
            let id = this.$route.query.id
            let url = `/trains/course_click/${id}/`
            axios.post(url).then(res=>{
                if(res.msg=='点赞成功'){
                    this.dolike = true
                }else if(res.msg=='已取消点赞'){
                    this.dolike = false
                }
            })
        },
        classratechange(){
            let id = this.$route.query.id
            let grade = this.is_course_grade
            let url = `/trains/update_grade/${id}/`
            axios.post(url,{grade}).then(res=>{
                
            })
        },
        classrate(val){
            this.is_course_grade = val
            this.classratechange()
        },
        classCollection(){
            let id = this.$route.query.id
            let url = `/trains/collection_course/${id}/`
            axios.post(url).then(res=>{
                if(res.msg=='加入收藏成功'){
                    this.joinnn = true
                    this.texttt = '已加入'
                }else if(res.msg=='取消收藏成功'){
                    this.joinnn = false
                    this.texttt = '加入学习'
                }
            })
        },
        callback(key) {
        },
        handleChange(e) {
            this.value = e.target.value;
        },
    },
    computed:{
        videowidth: ()=>{
            if(window.innerWidth>=1200){
                return 1200+'px'
            }else{
                return '100%'
            }
        }
    }
}
</script>

<style lang='less'>
.videodetail{
    .video_container{
        margin: 0 auto;
        background: white;
        .video_banner{
            width: 100%;
            margin-bottom: 20px;
            margin-top: 40px;
            img{
                width: 100%;
            }
        }
    }
    .video_content{
        padding-bottom: 30px;
        border-bottom: 1px solid grey;
        width: 90%;
        margin: 0 auto;
        .video_title{
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid gray;
            margin-bottom: 15px;
            .title_left{
                padding-left: 5px;
                border-left: 2px solid gray;
            }
            .tilte_right{
                span{
                    margin-left: 3px;
                }
            }
        }
        .kkk{
            display: flex;
            justify-content: space-between;
            .videoo{
                width: 80%;
            }
            .video_name{
                width: 20%;
                text-align: center;
                h2{
                    font-weight: bold;
                    margin-top: 8vh;
                }
                p{
                    margin: 5px 0 5px 0;
                    font-size: 16px;
                }
                span{
                    font-size: 15px;
                }
                .join_class{
                    width: 50%;
                    margin: 0 auto;
                    padding: 5px;
                    background: #018E4A;
                    color: white;
                    border-radius: 15px;
                    margin-top: 8vh;
                    cursor: pointer;
                    i{
                        margin-right: 5px;
                        font-size: 16px;
                        font-weight: bold;
                    }
                    span{
                        font-weight: bold;
                    }
                }
            }
        }
    }
    .class_detail{
        padding: 15px 0 20px 0;
        display: flex;
        justify-content: space-between;
        width: 90%;
        margin: 0 auto;
        .class_left{
            width: 65%;
            border: 1px solid gainsboro;
            border-radius: 5px;
            padding: 13px;
        }
        .class_right{
            width: 100%;
            padding: 10px;
            border: 1px solid gainsboro;
            border-radius: 5px;
            cursor: pointer;
            h3{
                font-weight: bold;
            }
            .touxiang{
                display: flex;
                .tou{
                    margin-left: 15px;
                    p{
                        margin: 10px 0 10px 0;
                    }
                }
            }
            i{
                font-style: normal;
                letter-spacing: 1px;
            }
            .have_video{
                margin-top: 25px;
                display: flex;
                justify-content: space-between;
                b{
                    color: #008D48;
                }
                span{
                    padding: 5px;
                    color: #008D48;
                    border: 2px solid #008D48;
                    border-radius: 10px;
                    cursor: pointer;
                }
            }
        }
        .study{
            width: 100%;
            padding: 10px;
            border: 1px solid gainsboro;
            border-radius: 5px;
            margin-top: 25px;
            h3{
                font-weight: bold;
            }
            .study_detail{
                display: flex;
                justify-content: space-evenly;
                flex-wrap: wrap;
                .study_one{
                    width: 23%;
                    padding:10px 0 10px 0;
                    .headddd{
                        text-align: center;
                        margin-bottom: 5px;
                    }
                    p{
                        text-align: center;
                        margin: 0;
                    }
                }
            }
        }
    }
    .dada ,.kaka{
        text-align: center;
    }
    .rrrright{
        width: 30%;
    }
    .interest{
        .inter_title{
            text-align: center;
            h2{
                font-weight: bold;
            }
            .in_innn{
                display: flex;
                justify-content: center;
                .mmm ,.nnn{
                    width: 7vw;
                    height: 1px;
                    border-bottom: 1px solid;
                    margin-top: 16px;
                }
                h2{
                    margin: 0 15px 0 15px;
                }
            }
            p{
                font-size: 16px;
                margin: 10px 0 10px 0;
                color: #999999;
            }
        }
        .inter_content{
            display: flex;
            justify-content: space-evenly;
            .ine_one{
                width: 24%;
                padding: 5px;
                border-radius: 14px;
                border: 1px solid gainsboro;
                cursor: pointer;
                img{
                    width: 100%;
                    height: 20vh;
                }
                p{
                    font-size: 16px;
                    margin: 10px 0 0 0;
                }
                .adsad{
                    display: flex;
                    justify-content: space-between;
                    p{
                        color: #008D48;
                        margin: 0;
                    }
                    span{
                        padding: 3px;
                        background: #008D48;;
                        color: white;
                        border-radius: 8px;
                        margin-right: 6px;
                    }
                }
            }
        }
    }
    .more_video{
        text-align: center;
        padding: 62px 0 62px 0;
        margin-bottom: 39px;
        span{
            font-size: 20px;
            color: #008D48;
            padding: 10px;
            border: 1px solid #008D48;
            border-radius: 10px;
            font-weight: bold;
            cursor: pointer;
        }
    }
    .doeslike{
        color: #fadb14;
    }
    .commentlist{
        padding: 10px;
        border: 1px solid gainsboro;
        border-radius: 7px;
        margin-bottom: 10px;
        .listone{
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            .ant-avatar-lg.ant-avatar-icon{
                margin-top: 5px;
            }
            .listone_right{
                width: 91%;
            }
            p{
                margin: 0;
            }
            p:nth-of-type(1){
                font-size: 17px;
                font-weight: bold;
                display: inline-block;
                margin-right: 20px;
            }
            p:nth-of-type(2){
                color: #999999;
                font-size: 12px;
                display: inline-block;
            }
            p:nth-of-type(3){
                color: #999999;
                margin-top: 10px;
            }
        }
    }
    .addcomment{
        padding: 10px;
        margin-bottom: 12px;
    }
}
</style>